<template>
	<view class="container" style="margin-bottom:104upx">
		<view class="no-lessons" v-if="lesson_list.length===0">
			<i class="iconfont iconkonggouwuche"></i>
			<view class="no-lessons-text">您的购物车是空的~</view>
			<navigator url="index" class="no-lessons-btn">前往选课</navigator>
		</view>
		<span v-else class="list">
			<view class="item-line" v-for="(item,index) in lesson_list" :key="index">
				<view class="lesson-warp">
					<div class="m-checkbox" :class="{'m-checked':item.checked}" @click="checkboxChange(index)"></div>
					<view class="item"><v-competitive-summary mclass="lesson-card" :item="item"></v-competitive-summary></view>
				</view>
			</view>
		<view class="del-all">
			<view class="select-all">
				<div class="all-checkbox" :class="{'m-checked':is_all}" @click="changeAll()"></div>
				<span>全选</span>
			</view>
			<view v-if="deleting" class="del-btn" :class="{'active' : total_del}" @tap="del()">删除（{{total_del}}）</view>
			<span v-else>
				<view class="total_count">
					<span class="total-price-black">合计：{{ total_price }}</span>
					<span class="total-discount" v-if="total_discount">优惠：-{{ total_discount }}</span>
				</view>
				<view class="pay-btn" @tap="pay">立即结算</view>
			</span>
		</view>
		</span>
	</view>
</template>
<script>
import competitiveSummary from './components/competitive-summary'
import util from '@/common/util.js'
var _this;
export default {
	components:{
		vCompetitiveSummary: competitiveSummary
	},
	data() {
		_this = this;
		return {
			lesson:'',
			current:'',
			course: '',
			lesson_list: [{}],
			del_id_item:[],
			del_total: 0,
			price_total: 0,
			is_all: false,
			del_all:false,
			deleting: false,
			lesson_card: {
						subject_name: '语文',
						subject_id: '12',
						card_title: '2019中考必备复习方法讲座',
						card_duration: '4.12-5.20',
						card_date: '每周四/日',
						card_daytime: '15:00-17:00',
						card_lesson_count: '6节课',
						lesson_price: '免费',
						lesson_preprice: '¥1200',
						remain_place: '11',
						remain_date: '4',
						lesson_entered: '1204',
						lesson_teachers: [
							{
								t_id: '123',
								t_avatar: '/static/image/lesson-teacher-avatar.png',
								t_name: "王小鹏"
							},
							{
								t_id: '1234',
								t_avatar: '/static/image/lesson-teacher-avatar.png',
								t_name: "王丽"
							}
						]
					}
		};
	},
	async onLoad(e){
		// this.loaded = true;
		// uni.showLoading({title:"loading..."})
		// this.$gdapi.apiPost('/shopCar/selAllCar', {userNumber: 1001}).then(function(res){
		// 	if (res.data.code == "200") {
		// 		_this.lessonList = res.data.data.map(x=>{return {...x, productPhoto: x.productPhoto.split(',')}})
		// 		_this.selectList = _this.lessonList.map(x=>{
		// 			return {
		// 				modelId: x.modelId,
		// 				productNumber: x.productNumber,
		// 				checked: false
		// 			}
		// 		})
		// 		_this.$forceUpdate()
		// 	// 没有数据
		// 	} else if (res.data.code == "400") {
		// 		uni.hideLoading()
		// 	} else {
		// 		uni.hideLoading()
		// 		uni.showToast({title: res.data.msg,duration:3000,complete() {
		// 			uni.navigateBack()
		// 		}})
		// 	}
		// 	uni.hideLoading()
		// })
		// // 5秒后自动关闭
		// setTimeout(uni.hideLoading, 5000)
	},
	onHide() {
		uni.hideLoading()
	},
	onNavigationBarButtonTap(e){
		var _vm = this;
		this.deleting = !this.deleting
		// #ifdef APP-PLUS  | MP
		var webView = this.$mp.page.$getAppWebview();
		webView.setTitleNViewButtonStyle(0, {
			text: _vm.deleting ? '完成' : '编辑',
		});
		// #endif  
		this.cleanCheck()
	},
	filters:{
		totalFilter (v){
			return v.toFixed(1)
		}
	},
	computed:{
		total_del (){
			return this.lesson_list.filter(x=>x.checked).length
		},
		total_price (){
			return this.lesson_list.map(x=>x.checked?(Number(x.lesson_price)||0):0).reduce((a,b)=>a+b)
		},
		total_discount (){
			return 80
		}
	},
	methods:{
		checkboxChange (idx) {
			var _this = this;
			console.log('touch',idx);
			var _t = this.lesson_list[idx];
			_t.checked = !_t.checked;
			this.$set(this.lesson_list, idx, _t);
			// this.deleting ? this.sumDel() : this.sumPrice();
		},
		// 删除计算
		sumDel() {
			let _tv = 0
			this.selectList.forEach(x=>{_tv += (x.checked?1:0)})
			this.del_total = _tv;
		},
		// 购买计算
		sumPrice() {
			let _tv = 0, _this = this;
			this.selectList.forEach((x,i)=>{
				_tv += (x.checked ? _this.lessonList[i].productPrice*_this.lessonList[i].productNum : 0)
				})
			console.log(_tv)
			this.price_total = _tv;
		},
		// 清空选择
		cleanCheck (){
			var _vm = this;
			var _t = _vm.lesson_list.map(x=>{x.checked=!1;return x});
			_vm.$set(_vm,'lesson_list',_t);
			_vm.del_total = 0;
			_vm.price_total = 0;
			_vm.$forceUpdate();
		},
		tempdeletechange () {
			this.deleting = !this.deleting;
			this.cleanCheck()
		},
		// numbox = [newval, vm]
		numChange (numbox) {
			var idx = numbox[1].index, _t = this.lessonList[idx];
			// this.$gdapi.apiPost('/shopCar/upCar', {productNumber: _t.productNumber, productNum: numbox[0]}).then(res=>{
			// 	if(res.data.code == 200){
			// 		_t.productNum = numbox[0];
			// 		this.$set(this.lessonList, idx, _t)
			// 		this.deleting ? this.sumDel() : this.sumPrice();					
			// 	}
			// })
			// @numchange="item.productNum"
			// console.log(this.lessonList,newVal)
		},
		// 控制全选和取消全选
		changeAll: function(e) {
			var _this = this;
			// 控制全选和取消全选
			this.is_all = !this.is_all;
			var _t = this.lesson_list.map(x=>{x.checked=_this.is_all;return x})
			this.$set(this,'lesson_list',_t)
			// this.deleting ? this.sumDel() : this.sumPrice();
		},
		del(numbers, modelds){
			var _vm = this;
			if (!_vm.deleting || !_vm.del_total) return;
			var _param = numbers || _vm.selectList.filter(x=>x.checked).map(x=>x.productNumber),
				_modelds = modelds || _vm.selectList.filter(x=>x.checked).map(x=>x.modelId);
			uni.showModal({
				title: '删除商品',
				content: '确认要删除所选商品吗？',
				success: (res)=>{
					if (res.confirm) {
						// 请求删除
						this.$zbapi.apiPost('/shopCar/delCar',{
							productNumber: _param,
							modeId: _modelds
							// 还是重新加载吧，删除业务已经修改了
						}).then(function(res){
							_vm.$set(_vm, 'lessonList', _vm.lessonList.filter(x=>_modelds.indexOf(x.modelId)===-1));
							// 删除完选择置空
							_vm.cleanCheck()
						})
					}
				}
			});
		}
		,pay() {
			uni.navigateTo({
				url: 'lesson-order'
			})
			var _this = this;
			if (_this.deleting || !_this.price_total) return;
			var order_data = this.selectList.filter(x=>x.checked).map(y=>_this.lessonList.find(z=>z.modelId==y.modelId&&z.productNumber==y.productNumber))
			// 校验所选的商品的类型是否一致
			let _payMode = order_data[0].payMode;
			if (order_data.find(x=>x.payMode!==_payMode)){
				return uni.showToast({title: "不同购买类型",icon: 'none'})
			}
			this.cleanCheck();
			uni.setStorage({
				'key': "order",	// 下单
				'data': {orders: order_data, ctime: new Date().getTime()},
				success(){
					// 删除购物车商品
					// 后端沟通，处于用户体验，不在此删除 11/2
					uni.navigateTo({
						url:'../order/confirm-order',
					})
				}
			})
		}
	}
}
</script>

<style lang="scss">
view{
	display: flex;
}
page{
	background: #F7F7F7;
}
// 修改check框样式

.m-checkbox{
	width: 40upx;
	height: 40upx;
	background: #FFF;
	border: 2upx solid #ccc;
	border-radius: 50%;
	position: absolute;
	top: 100upx;
	left: 6upx;
	z-index: 101;
	font-family: iconfont;
	.uni-checkbox-input {
		color: #fff;
		width: 500rpx;
	}
	&.m-checked {
		text-align: center;
		align-items: center;
		background: #00D5A2;
		border-color: #00D5A2;
		&:after{
			content:"\e65e";
			font-weight: 800;
			color: #FFFFFF;
			/* #ifdef APP-PLUS ||MP */
			margin: 3upx 0 0 5upx;
			/* #endif */
		}
	}
}
.select-all{
	display: flex;
	align-items: center;
	color: #666;
	.all-checkbox{
		width: 40upx;
		height: 40upx;
		background: #FFF;
		border: 2upx solid #ccc;
		border-radius: 50%;
		display: inline-block;
		font-family: iconfont;
		margin: 16upx;
		.uni-checkbox-input {
			color: #fff;
			width: 500rpx;
		}
		&.m-checked {
			text-align: center;
			align-items: center;
			background: #00D5A2;
			border-color: #00D5A2;
			&:after{
				content:"\e65e";
				font-weight: 800;
				color: #FFFFFF;
				/* #ifdef APP-PLUS ||MP */
				margin: 3upx 0 0 5upx;
				/* #endif */
			}
		}
	}
}
.no-lessons{
	display: flex;
	width: 100%;
	height: 100%;
	position: relative;
	.iconkonggouwuche{
		font-size:156px;
		color:#00D5A2 ;
		position: absolute;
		top: 40upx;
		left: 224upx;
	}
	.no-lessons-text{
		position: absolute;
		top: 476upx;
		left: 268upx;
		color: #999999;
		font-size: 26upx;
		width: 230upx;
		height: 26upx;
	}
	.no-lessons-btn{
		justify-content: center;
		align-items: center;
		background-color: #00D5A2;
		position: absolute;
		font-size: 32upx;
		color: #FFFFFF;
		top: 588upx;
		left: 232upx;
		width: 300upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		border-radius: 8upx;
	}
}
.icon {
	&.iconyijianfankui {
		&:before{content:"\e61b";}
	}
	// &.tianjia {
	// 	&:before{content:"\e81a";}
	// }
}

.del-all{
	width: 100%;
	height: 100upx;
	position: fixed;
	bottom: 0;
	background-color: #FFFFFF;
	border-top:4upx solid #ECECEC;
	z-index: 445 !important;
	.del-all-circle{
		position: absolute;
		left: 30upx;
		top: 30upx;
	} 
	 .del-btn{
		 width:240upx ;
		 height: 100upx;
		 background-color: #CCCCCC;
		 position: absolute;
		 right: 0;
		 color:#FFFFFF;
		 justify-content: center;
		 align-items: center;
		 &.active {
			 background: #FF7171;
		 }
	 }
	 .pay-btn{
		 width:240upx ;
		 height: 100upx;
		 background-color: #FFB800;
		 position: absolute;
		 right: 0;
		 color:#FFFFFF;
		 justify-content: center;
		 align-items: center;
	 }
	 .total_count {
		 min-width: 130upx ;
		 height: 100upx;
		 position: absolute;
		 right: 240upx;
		 color:#FFFFFF;
		 display: flex;
		 flex-direction: column;
		 padding-right: 10upx;
		 .total_tip {
			 margin: 6upx 0;
			 min-width: 80upx;
			 height: 26upx;
			 font-size: 26upx;
			 font-weight:400;
			 line-height: 46upx;
			 color: #999999;
		 }
		 .total-price-black {
			 font-size: 32upx;
			 font-family:Source Han Sans CN;
			 font-weight:400;
			 color: #333;
		 }
		 .total-discount {
			 font-size: 26upx;
			 font-family:Source Han Sans CN;
			 font-weight:400;
			 color: #00D5A2;
		 }
		 .total_price {
			 min-width: 68upx;
			 height: 60upx;
			 font-size: 34upx;
			 font-weight:500;
			 line-height: 60upx;
			 color: #FE2806;
			 &:before {
			 	content: "￥";
			 	font-size: inherit;
			 }
		 }
	 }
}
.list{
	flex-wrap: wrap;
	width: 100%;
	margin-top: 30upx;
	.item-line {
		min-height: 240upx;
		margin-bottom: 20upx;
		position: relative;
		.lesson-warp{
			width: 100%;
			.item {
				width: inherit;
				margin: 0 30upx;
				.lesson-card {
					background: #FFFFFF;
				}
			}
		}
	}
}
</style>